<template>
<div class="app-container">

    <custom-query :items="item1" @query="query" :default-value="defValue" ref="queryRef"></custom-query> 

     <el-row :gutter="15">
            <el-col :span="5">
                <el-card style="width:100%;float:left;overflow:auto;margin: 15px 0;" class="org-tree" shadow="never">
                     <el-tree
                    :data="orgTree"
                    node-key="id"
                    :props="defaultProps"
                    highlight-current
                    :default-expanded-keys="treeRoot"
                    show-checkbox
                     check-strictly
                     check-on-click-node
                    @check-change="handleChange"
                    :expand-on-click-node="false"
                    ref ="treeData">
                  </el-tree>
                </el-card>
            </el-col>
            <el-col :span="19">
                <custom-table-grid ref="orgList" 
                :column-data="columndata1" 
                :toolbar="toolbar"
                :url="ur1" style="margin-top:15px"
                :operations="operations" >
                </custom-table-grid>
            </el-col>
      </el-row>   

 
   <!-- 弹出新增界面 -->
     <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <custom-form ref="common" id="common" :items="commonItems" :default-value="form"></custom-form>
         <div slot="footer" class="dialog-footer">
             <custom-btn btn-type="cancel" @btn-click="dialogFormVisible=false" :label="$t('common.cancel')"></custom-btn>
             <custom-btn btn-type="confirm" @btn-click="confirm2" :label="$t('common.confirm')" ></custom-btn>
         </div>   
     </el-dialog>
</div>
</template>

<script>
import customBtn from '@/views/platform/components/common/customBtn'
import customForm from '@/views/platform/components/multiForm/customForm'
import customQuery from '@/views/platform/components/queryCondition/customQuery'
import customTableGrid from '@/views/platform/components/tableGrid/customTableGrid'
import { post } from '@/api/common'
import { deepClone } from '@/utils/index'
export default {
  name: 'platform_org_org',
  data() {
    const operations = [
      {
        type: 'edit',
        label: 'edit',
        method: this.editClick
      }, {
        type: 'delete',
        label: 'delete',
        method: this.deleteClick
      }
    ]

    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      operations: [
        {
          type: 'edit',
          label: 'edit',
          method: this.editClick
        }, {
          type: 'delete',
          label: 'delete',
          method: this.deleteClick
        }
      ],

      i18Keys: [
        'add',
        'edit',
        'delete',
        'save',
        'cancel',
        'query',
        'saveSuccess',
        'pleaseSelectOneNode',
        'deleteSuccess'],
      ur1: '/common/org/organicManageQuery',
      pageType: 'add',
      form: {
        orgName: '',
        orgCode: '',
        orgNo: ''
      },
      toolbar: [{
        type: 'add',
        label: 'add',
        method: this.addClick
      }],
      // 初始化查询区域控件
      item1: [
        {
          label: 'name2',
          elType: 'input',
          id: 'orgName'
        },
        {
          label: 'code',
          elType: 'input',
          id: 'orgCode'
        }

      ],
      defValue: {
        'orgCode': '',
        'orgName': '',
        'orgNo': ''
      },
      dialogFormVisible: false,
      formLabelWidth: '180px',
      // 初始化列表显示的列信息
      columndata1: [
        {
          label: 'name2',
          prop: 'ORGNAME',
          sort: true,
          freeze: true
        },
        {
          label: 'code',
          prop: 'ORGCODE',
          sort: true,
          freeze: true
        },
        {
          label: 'no',
          prop: 'ORGNO',
          sort: true,
          freeze: true
        },
        {
          label: 'updateTime',
          prop: 'UPTIME',
          sort: true,
          freeze: true
        },
        {
          label: 'operation',
          prop: 'op',
          type: 'operations',
          operations: operations
        }
      ],
      title: '',
      commonItems: [],
      orgNoState: true

    }
  },
  components: { customQuery, customTableGrid, customBtn, customForm },
  computed: {
    orgTree() {
      if (this.$store.getters.orgTree) {
        const tree = []
        tree.push(deepClone(this.$store.getters.orgTree))
        // this.setTreeDisabled(tree, true)
        return tree
      } else {
        return null
      }
    },
    treeRoot() {
      if (this.$store.getters.orgTree) {
        return [this.$store.getters.orgTree.id]
      } else {
        return null
      }
    }
  },

  mounted() {
    this.$refs.orgList.pageQuery(this.defValue)
  },
  methods: {
    setTreeDisabled(treedata, flag) {
      treedata.forEach(tree => {
        if (tree) {
          if (flag === true) {
            tree.disabled = true
          } else {
            tree.disabled = false
          }
          if (tree.children) {
            this.setTreeDisabled(tree.children, flag)
          } else {
            return
          }
        }
      })
    },
    /**
    设置树形控件单选 */
    handleChange(data, checked, childchecked) {
      if (checked) {
        this.$refs.treeData.setCheckedNodes([])
        this.$refs.treeData.setCheckedNodes([data])
        this.defValue.orgNo = data.id
        this.$refs.orgList.pageQuery(this.defValue)
      }
    },
    // 编辑
    editClick(index, row) {
      this.pageType = 'edit'
      this.title = this._$Z['edit']
      this.form = {
        orgId: row.ORGID,
        orgName: row.ORGNAME,
        orgCode: row.ORGCODE,
        orgNo: row.ORGNO,
        parentId: row.PARENTID
      }
      this.commonItems = [
        { label: 'name2', elType: 'input', id: 'orgName', validater: '{ "required": true, "length": [-1, 128] }' },
        { label: 'code', elType: 'input', id: 'orgCode', validater: '{ "required": true, "length": [-1, 32] }' },
        { label: 'no', elType: 'input', id: 'orgNo', disabled: true }
      ]
      this.subscribeDialog = true
      this.dialogFormVisible = true
      setTimeout(() => { // 延时删除校验
        this.$refs.common.clearValidate()
      }, 0)
    },
    // 删除
    deleteClick(index, row) {
      const param = {
        orgId: row.ORGID,
        orgNo: row.ORGNO
      }
      this.confirm().then(() => {
        post('/common/org/delOrganic', param).then(response => {
          this.$message({
            type: 'success',
            message: this._$Z['deleteSuccess']
          })
          this.$refs.orgList.pageQuery(this.defValue)
          this.$store.dispatch('setOrgTree')
        })
      })
    },
    // 保存
    confirm2() {
      this.$refs.common.checkForm(this.save)
    },

    save(param) {
      let ur2 = ''
      if (this.pageType === 'add') {
        ur2 = '/common/org/addOrganic'
      } else {
        ur2 = '/common/org/updateOrganic'
      }
      this.form['orgName'] = param.orgName
      this.form['orgCode'] = param.orgCode
      this.form['orgNo'] = param.orgNo
      post(ur2, this.form).then(response => {
        this.$message({
          type: 'success',
          message: this._$Z['saveSuccess']
        })
        this.$refs.orgList.pageQuery(this.defValue)
        this.$store.dispatch('setOrgTree')
        this.dialogFormVisible = false
      }
      )
    },
    // 查询列表
    query(value) {
      this.defValue = value
      this.$refs.orgList.pageQuery(value)
    },
    /**
    *新增
     */
    addClick() {
      this.form = {
        orgName: '',
        orgCode: '',
        orgNo: '',
        parentId: ''
      }
      let id = ''
      let orgNo = ''
      const selectNodeLs = this.$refs.treeData.getCheckedNodes()
      if (selectNodeLs.length > 1) {
        this.$message({
          type: 'error',
          message: this._$Z['pleaseSelectOneNode']
        })
        return
      }
      const selectNodeData = selectNodeLs[0]
      if (selectNodeData) {
        id = selectNodeData.attribute.ID
        orgNo = selectNodeData.id
      } else {
        this.$message({
          type: 'error',
          message: this._$Z['pleaseSelectOneNode']
        })
        return
      }
      this.form.parentId = id
      this.form.parentNo = orgNo
      this.commonItems = [
        { label: 'name2', elType: 'input', id: 'orgName', validater: '{ "required": true, "length": [-1, 128] }' },
        { label: 'code', elType: 'input', id: 'orgCode', validater: '{ "required": true, "length": [-1, 32] }' },
        { label: 'no', elType: 'input', id: 'orgNo', disabled: true }
      ]
      this.title = this._$Z['add']
      this.dialogFormVisible = true
      setTimeout(() => { // 延时删除校验
        this.$refs.common.clearValidate()
      }, 0)
    }

  }
}
</script>
<style lang="scss">
  .org-tree {
    .el-card__body {
      height: calc(100vh - 180px);
    }
  }
</style>

  

